<script>
import {getAdminListFn,addAdminFn,updateAdminFn,delAdminFn} from '@/api/user'
import { routes } from '@/router';
import { ElMessage } from 'element-plus'
export default{
    data(){
        return{
            //管理员列表数据
            adminList:[],
            //控制是否出现添加页面
            drawer:false,
            //路由列表
            routes:routes[0].children,
            //填入添加管理员和管理员详情中的数据
            formData:{
                adminname:'',
                password:'',
                role:'',
                checkedKeys:[]
            },
            //当前页码
            currentPage:1,
            //编辑管理员对话框状态
            dialogVisible:false,
            //编辑框中，默认选中的内容
            defaultCheckedKeys:[],
        }
    },
    computed:{
        tableData(){
            return this.adminList.slice((this.currentPage-1)*10, (this.currentPage-1)*10+10)
        }
    },
    mounted() {
        //发送请求获取管理员列表
        this.getAdminList()
    },
    methods: {
        //加载数据
        getAdminList(){
            getAdminListFn().then(res=>{
            // console.log(res.data);
            this.adminList=res.data
            })
        },   



        //添加管理员
        //打开对话框
        addAdminClick(){
            this.drawer=true
        },
        
        //获取树形组件中选择的内容(含父节点)
        formatCheckedKeys(code){
            // console.log( this.$refs.treeRef.getCheckedNodes(true,true));
            
            //获取所有选中的子节点
            const list = code=='10086'? this.$refs.treeRef2.getCheckedNodes(true,true) : this.$refs.treeRef.getCheckedNodes(true,true)



            //用来放父级路由的label
            const tempList=[]

            //放最终结果
            const result =[]

            list.forEach(item=>{
                //根据子节点的label匹配到父节点
                //从所有数据中找到当存在子节点和当前数据相同的节点时，返回该父节点
                const parent = this.routes.find(ritem=>{
                    return ritem.children.some(child => child.label==item.label)
                })
                if(tempList.includes(parent.label)){
                    //父节点存在
                    //如果父级已经存在,当前选中的item加入父级中
                    result.find(item=>item.label==parent.label).children.push(item)

                }else{
                    //父节点不存在

                    tempList.push(parent.label)
                    //在结果中添加一个父级路由，并将当前被选中的子路由 item 添加到结果中
                    result.push({
                        label: parent.label,
                        path: parent.path,
                        icon: parent.icon,
                        children: [item] 
                    })
                }
                //将用户选择的内容和父级都赋值到数组中
                // console.log(result);
                this.formData.checkedKeys=result

            })

        
        },
        
        //提交管理员数据到服务器
        submitAdmin(){
            //只包含子节点不包括父节点
            // console.log( this.$refs.treeRef.getCheckedNodes(true,true));
            
            this.formatCheckedKeys()
            
            //将管理员数据提交到服务器
            // con sole.log(this.formData);
            addAdminFn(this.formData).then(res=>{
                console.log(res);
                if(res.code==200){
                    ElMessage.success(res.message)
                }
                //再次渲染
                this.getAdminList()

                //关闭对话框
                this.drawer=false

                //清除表单内容
                this.formData={
                adminname:'',
                password:'',
                role:'',
                checkedKeys:[] 
                }
                
                //清除选中的内容
                this.$refs.treeRef.setCheckedNodes([])

            //重新加载数据
                this.getAdminList()
            })

        },



        //编辑管理员
        editClick(admin){
            // console.log(admin);
            //将接收到的该行的数据放入对话框
            this.formData.adminname=admin.adminname
            this.formData.password=admin.password
            this.formData.role=admin.role
            this.formData.checkedKeys=admin.checkedKeys
            // console.log(admin.checkedKeys);
            //对接收到的选中数据进行遍历，将每一个子节点的地址提取出来组成一个数组
            const list=[]
            admin.checkedKeys.forEach(parent=>{
                if(parent.children){
                    parent.children.forEach(item=>{
                        list.push(item.path)
                    })
                }
            })
            //将所有该行数据中选中的子节点的地址赋值给默认被选中属性
            this.defaultCheckedKeys=list

            //展开编辑框
            this.dialogVisible=true
        },



        //关闭编辑框时清除里面的数据
        editClose(){
            this.formData={
                adminname:'',
                password:'',
                role:'',
                checkedKeys:[] 
                }
            this.defaultCheckedKeys=[]
            this.$refs.treeRef2.setCheckedNodes([])
        },

        //编辑提交更新
        updateClick(){
            this.dialogVisible=false
            //发送数据,将编辑后的内容发送给服务器
            this.formatCheckedKeys('10086')
            console.log(this.formData);
            updateAdminFn(this.formData).then(res=>{
                if(res.code==200){
                    this.getAdminList()
                }else{
                    ElMessage.error('温馨提示'+res.message)
                }
            })
        },


        //删除管理员
        delClick(row){
            console.log(row.adminid);
            delAdminFn({
                adminid:row.adminid
            }).then(res=>{
                console.log(res);
                if(res.code==200){
                    ElMessage.success('删除数据成功！')
                    this.getAdminList()
                }else{
                    ElMessage.error('温馨提示'+res.message)
                }
            })
        }   
    },
}
</script>

<template>
    <h4>管理员列表<el-button style="margin-left: 10px;" :disabled="$store.state.userInfo.role==1"  @click="addAdminClick">添加</el-button></h4>    
    
    <!-----------------表格数据渲染--------------------->
    <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column type='index' prop="date" label="序号" width="180">
        <template #default="scope">
            <div> 
               {{(currentPage-1)*10+1+ scope.$index }} 
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="adminname" label="管理员名称" width="180" />
    <el-table-column prop="role" label="管理员权限">
        <template #default="{row,column,$index}">

            <el-tag :type="row.role==1 ? 'primary':'success'">
                {{  row.role==1?'普通管理员':'超级管理员' }}
            </el-tag>

            <!-- index为索引值 -->
            <!-- {{ $index }} -->

            <!-- row表示当前列数据 -->
            <!-- {{ row }} -->
            
            <!-- column为所有数据 -->
            <!-- {{ column }} -->
        </template>
    </el-table-column>
    <el-table-column label="操作">
        <template #default="{$index,row,column}">
            <el-button type="primary" @click="editClick(row)" :disabled="$store.state.userInfo.role==1">编辑</el-button>
        <el-popconfirm :disabled="$store.state.userInfo.role==1"  @confirm="delClick(row)" confirm-button-text="确定" cancel-button-text="取消" :title="'你确定要删除'+row.adminname+'吗?'" >
            <template #reference>
                <el-button type="danger" :disabled="$store.state.userInfo.role==1">删除</el-button>
            </template>
        </el-popconfirm>        
        </template>   
    </el-table-column>
  </el-table>


   <!-- ------------------分页--------------- -->
   <el-pagination v-model:current-page="currentPage" background layout="prev, pager, next" :total="adminList.length"  />


  <!------------------- 添加管理员模板 ---------------->
  <el-drawer v-model="drawer" show-close title="添加管理员">
    <el-form label-width="auto">
        <!-- 管理员账号输入框 -->
        <el-form-item label="管理员账号">
            <el-input v-model="formData.adminname" placeholder="请输入管理员账号" />
        </el-form-item>

        <!-- 管理员密码输入框 -->
        <el-form-item label="管理员密码">
            <el-input v-model="formData.password" placeholder="请输入管理员密码" />
        </el-form-item>

        <!-- 管理员角色选择 -->
        <el-form-item label="管理员角色">
            <el-select v-model="formData.role" placeholder="请选择角色">
                <el-option label="普通管理员"  :value="1"/>
                <el-option label="超级管理员"  :value="2"/>
            </el-select>
        </el-form-item>
    </el-form>

        <!-- 管理员权限选择 -->
    <el-tree ref="treeRef" :data="routes" default-expand-all :node-key="routes.path" show-checkbox/>



    <el-button @click="submitAdmin">确认添加</el-button>
  </el-drawer>


  <!-- ---------------- 编辑管理员------------------ -->
  <el-dialog v-model="dialogVisible" title="编辑管理员" @close="editClose" width="500">
    
    <el-form label-width="auto">
        <!-- 管理员账号输入框 -->
        <el-form-item label="管理员账号">
            <el-input v-model="formData.adminname" placeholder="请输入管理员账号" />
        </el-form-item>

        <!-- 管理员密码输入框 -->
        <el-form-item label="管理员密码">
            <el-input v-model="formData.password" placeholder="请输入管理员密码" />
        </el-form-item>

        <!-- 管理员角色选择 -->
        <el-form-item label="管理员角色">
            <el-select v-model="formData.role" placeholder="请选择角色">
                <el-option label="普通管理员"  :value="1"/>
                <el-option label="超级管理员"  :value="2"/>
            </el-select>
        </el-form-item>
    </el-form>

        <!-- 管理员权限选择 -->
    <el-tree ref="treeRef2" :default-checked-keys="defaultCheckedKeys" :data="routes" default-expand-all node-key="path" show-checkbox/>

    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateClick">提交</el-button>
      </div>
    </template>
  </el-dialog>


</template>